<template>
	<form @submit="formSubmit" @reset="formReset">
		<view class="uni-form-item uni-column">
			<view class="title">username</view>
			<view class="uni-input">
				<input name="username" v-model="formdata.username" placeholder="这是一个输入框" />
			</view>
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">password</view>
			<view class="uni-input">
				<input name="username" v-model="formdata.password" placeholder="这是一个输入框" />
			</view>
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">code</view>
			<view class="uni-input">
				<input name="username" v-model="formdata.code" placeholder="这是一个输入框" />
				<image mode="heightFix" :src="captchaImageUrl" @error="imageError"></image>
			</view>
		</view>
		<view class="uni-btn-v">
			<button form-type="submit">Submit</button>
			<button type="default" form-type="reset">Reset</button>
		</view>
		
			<button @click="upload">Submit</button>
	</form>
</template>


<script>
	import { login,captchaImage } from '@/common/utils/api.js';
	import storage from '@/common/utils/storage.js';
	export default {
		data() {
			return {
				captchaImageUrl : "",
				formdata : {
					username : "",
					password : "",
					code : "",
					uuid : ""
				}
			}
		},
		onLoad() {
			this.getCaptchaImage()
		},
		methods: {
			getCaptchaImage : function(){
				captchaImage().then((res)=>{
					this.captchaImageUrl = "data:image/gif;base64," + res.img
					this.formdata.uuid = res.uuid
				})
			},
			formSubmit: function() {
				login(this.formdata).then((res)=>{
					storage.set('token', res.token)
					this.getCaptchaImage()
				})
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>


<style>
	form {
	}
	.uni-form-item{
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid red;
		padding: 0 20rpx;
		
	}
	.uni-form-item .title{
		padding-top: 20px;
	}
	.uni-form-item .uni-input{
		display: flex;
		height: 48px;
		line-height: 48px;
	}
	.uni-form-item .uni-input input{
		flex: 1;
		height: 100%;
	}
	.uni-form-item .uni-input image{
		height: 100%;
		max-width: 128px;
	}
</style>
